<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业链接地址</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
      tr {
        display: flex;
      }

      td,
      th {
        flex: 1;
      }
    </style>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
      .box {
        width: 300px;
        height: 300px;
        border: 10px solid red;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <div class="container">
      <div class="row table-responsive">
        <h1>作业链接地址</h1>
        <table class="table  table-bordered table-striped">
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>地址</th>
            </tr>
          </thead>
          <tbody>

            <tr v-for="item,index in teacherLists">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td><a :href="item.url" target="_blank">{{item.url}}</a></td>
            </tr>
          </tbody>
        </table>
        <table class="table table-bordered table-striped">
          <caption>每日分数</caption>
          <thead>
            <tr>
              <th>日期\姓名</th>
              <th v-for="item in teacherLists">{{item.name}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in scoresList">
              <td v-for="option in item">{{option}}</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <script>
      const vm = new Vue({
        data: {
          teacherLists: [
            {
              name: "汪涛",
              url: "https://gitee.com/toddchina/vue-July-2020/tree/master/",
            },
            {
              name: "闫海阔",
              url: "https://gitee.com/davidyan0/david",
            },
            {
              name: "刘晓佳",
              url: "https://gitee.com/luonuoyi/vue_learning",
            },
            {
              name: "吴桐",
              url: "https://gitee.com/wtwlw/vue_practice",
            },
            {
              name: "王晨",
              url: "https://gitee.com/george0512/vue-study",
            },
            {
              name: "崔冬青",
              url: "https://gitee.com/cuiqazxcv/zuoye1",
            },
            {
              name: "李万利",
              url: "https://gitee.com/li_wanli/training",
            },
            {
              name: "田梦",
              url: "https://gitee.com/tm1998/vue",
            }
          ],
          // 汪涛 闫海阔 刘晓佳 吴桐 王晨 崔冬青 李万利 田梦
          scoresList: [
            ["7月15日", "A+ 图片切换的技巧", "B+ 表单控件注意布局", "A", "A", "A", "A", "A", "B+ 注意函数命名"],
            [
              "7月16日",
              "A",
              "A",
              "A",
              "A vue内容没有问题，移动端网页重构需要学习补充",
              "A vue内容没有问题，移动端网页重构需要学习补充",
              "A vue内容没有问题，网页重构需要学习补充",
              "A",
              "A"
            ],
            [
              "7月17-19日",
              "未提交",// 汪涛
              "B+ 对于知识点掌握问题不大，但需要灵活运用，需要多练习", //  闫海阔
              "B+ 函数命名、变量命名规范，使用驼峰命名", // 刘晓佳
              "A ", // 吴桐
              "A 请将公共数据（商品列表）放到store.js中 ", // 王晨
              "未提交", // 崔冬青
              "A+", // 李万利
              "未提交" //  田梦
            ],
            [
              "7月20日",
              "未提交",// 汪涛
              "B+ 页面不美观", //  闫海阔
              "A", // 刘晓佳
              "A ", // 吴桐
              "B+ 计算代码需要优化，请使用循环", // 王晨
              "A", // 崔冬青
              "A", // 李万利
              "B+ 计算属性没有使用到，总价可以用计算属性获得" //  田梦
            ],
            [
              "7月21日",
              "未提交",// 为提交
              "B+ 锚点知识需要再巩固", //  闫海阔
              "B+ 命名规范,表格的友好度，", // 刘晓佳
              "B+ 加载更多没有， 命名规范 numberToChinese，表格的友好度， ", // 吴桐
              "B+ 过滤器作业没有，表格的友好度,  ", // 王晨
              "B+ 表格的友好度，模拟数据，加载更多没有，命名规范 组件是 component", // 崔冬青
              "A  表格组件的扩展性 ", // 李万利
              "插槽、过滤器、dom操作" //  田梦
            ],

          ],

        }
      }).$mount(".container")
    </script>
  </body>

</html>